<!--
 * @Author: cqg
 * @Date: 2021-07-04 10:47:14
 * @LastEditTime: 2021-07-09 15:08:47
 * @Description: file content
 * @LastEditors: cqg
-->
<template>
  <div>
    <!-- <screen-adapter> -->
    <img src="@/assets/images/Roomtitle.png" class="bg_title" />
    <div class="content_title">
      <img src="@/assets/images/zuojiantou.png" class="back_img" @click="$router.go(-1)" />
      <span class="title_name">隔离点房间看板</span>
    </div>
    <div style="padding:20px; ">
      <span class="hotelName weight">{{hotelName}}</span>
      <template v-if="hotelInformation.hotelDistrict">{{ hotelInformation.hotelDistrict }}</template>
      <template v-if="hotelInformation.hotelStreet">-{{ hotelInformation.hotelStreet }}</template>
      <template v-if="hotelInformation.hotelCommunity">-{{ hotelInformation.hotelCommunity }}</template>
      <template v-if="hotelInformation.hotelGrid">-{{ hotelInformation.hotelGrid }}</template>
      <span class="ml20">负责人：{{ hotelInformation.hotelContact }}</span>
      <span class="ml20">联系方式：{{ hotelInformation.hotelPhone }}</span>
      <span class="ml20">挂点领导：{{ hotelInformation.leader }}</span>
      <div class="floorTab mt20">
        <el-tabs v-model="activeName" @tab-click="getARoomList">
          <el-tab-pane label="全部" />
          <el-tab-pane v-for="item in hotelInformation.floorStaticalList" :key="item.name" :label="item.name+'层'" :name="item.name" />
        </el-tabs>
      </div>
      <p style="font-weight:700;" @click="statisticsShow" class="mb20">
        总体情况
        <i class="el-icon-arrow-up" style="background-color: #66B6FF;color: white;" />
      </p>
      <div :class="[activeClass,]" style="overflow: hidden;">
        <div class="statisticalBox fl" v-for="item in  sumList" :key="item.img" :style="{background:item.bgc,color:item.color}">
          <div class="fl box-item">
            <img :src="require(`${item.img}`)" class="mr20" width="30" height="100%" />
            <div>
              <span>
                <span class="weight" style="font-size:20px;">{{item.result}}</span>间
              </span>
              <p style="text-align:right;width: 100%;">{{item.name}}</p>
            </div>
          </div>
        </div>
        <div>
          <div style="overflow: hidden; height:25px;">
            <el-radio-group v-model="roomState" class="fr" @change="getAllInfo()">
              <el-radio label="21">已入住</el-radio>
              <el-radio label="31">待消杀</el-radio>
              <el-radio label="01">空房间</el-radio>
            </el-radio-group>
          </div>
          <div style="overflow: hidden;">
            <div class="fr" style="font-weight:700;">
              <el-tag type="info" style="background:rgba(255, 160, 89, 0.1); color:#FFA059;height:26px;">关爱人群</el-tag>
              <el-tag type="info" style="background:rgba(221, 131, 224, 0.1); color:#DD83E0;">关注人群</el-tag>
              <el-tag type="info" style="background:rgba(255, 139, 124, 0.1);color:#FF8B7C;">确诊病例</el-tag>
              <el-tag type="info" style="background:rgba(124, 148, 244, 0.1); color:#7C94F4;">一般人员</el-tag>
              <el-tag type="info" style="background:rgba(97, 195, 157, 0.1); color:#61C39D;">工作人员</el-tag>
            </div>
          </div>
          <div style="overflow: hidden;" class="prompt">
            <div class="fr">
              <img src="./img/老人6.png" width="16" height="16" alt />老人
              <img src="./img/儿童6.png" width="16" height="16" alt />儿童
              <img src="./img/孕妇6.png" width="16" height="16" alt />孕妇
              <img src="./img/基础疾病6.png" width="16" height="16" alt />基础疾病
              <img src="./img/心理疾病6.png" width="16" height="16" alt />心理疾病
              <img src="./img/形状6.png" width="16" height="16" alt />十大症状
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容主体 该酒店所有层容器 -->
    <div class="main">
      <el-collapse accordion :value="0">
        <el-collapse-item v-for="(floor,index) in theLayerData" :key="floor.name" :name="index" class="floor_con">
          <template slot="title">
            <img src="./img/编组.png" width="20" alt />
            <span style="color:#4E9DFD;font-size:16px;" class="ml20 mr20">第{{floor.name}}层</span>
          </template>
          <div class="wrapper">
            <div :class="['roomBox','mt20',item.color] " v-for="item in floor.houseStaticalVoList" :key="item.houseId" @click="$router.push({path:'/roomNews',query:{houseId:item.houseId,hotelId:$route.query.hotelId}})">
              <img src="./img/gr.png" alt v-if="item.color=='BLUE'" />
              <img src="./img/red.png" alt v-if="item.color=='RED'" />
              <img src="./img/blue.png" alt v-if="item.color =='GREEN'" />
              <img src="./img/or.png" alt v-if="item.color=='ORANGE'" />
              <span style="font-weight:700;font-size:16px;">{{item.roomNum}}</span>
              <span class="ren">{{item.rs}}人</span>
              <p class="renyuanImg" v-if="item.color=='ORANGE'">
                <img src="./img/儿童.png" width="20" height="20" alt v-if="item.ets" />
                <img src="./img/老人.png" width="20" height="20" alt v-if="item.lrs" />
                <img src="./img/孕妇.png" width="20" height="20" alt v-if="item.hys" />
                <img src="./img/形状.png" width="20" height="20" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病.png" width="20" height="20" alt v-if="item.xljbs" />
                <img src="./img/基础疾病.png" width="20" height="20" alt v-if="item.jcjbs" />
              </p>
              <p class="renyuanImg" v-if="item.color=='RED'">
                <img src="./img/儿童(1).png" width="20" height="20" alt v-if="item.ets" />
                <img src="./img/老人(1).png" width="20" height="20" alt v-if="item.lrs" />
                <img src="./img/孕妇(1).png" width="20" height="20" alt v-if="item.hys" />
                <img src="./img/形状(1).png" width="20" height="20" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病(1).png" width="20" height="20" alt v-if="item.xljbs" />
                <img src="./img/基础疾病(1).png" width="20" height="20" alt v-if="item.jcjbs" />
              </p>
              <!-- <p class="renyuanImg">
              <img src="./img/儿童(2).png" width="20" height="20" alt  v-if="item.ets"/>
              <img src="./img/老人(2).png" width="20" height="20" alt v-if="item.lrs"/>
              <img src="./img/孕妇(2).png" width="20" height="20" alt   v-if="item.hys"/>
              <img src="./img/形状(2).png" width="20" height="20" alt v-if="item.sdzzs"/>
              <img src="./img/心理疾病(2).png" width="20" height="20" alt v-if="item.xljbs"/>
              <img src="./img/基础疾病(2).png" width="20" height="20" alt v-if="item.jcjbs"/>
              </p>-->
              <p class="renyuanImg" v-if="item.color =='GREEN'">
                <img src="./img/儿童(3).png" width="20" height="20" alt v-if="item.ets" />
                <img src="./img/老人(3).png" width="20" height="20" alt v-if="item.lrs" />
                <img src="./img/孕妇(3).png" width="20" height="20" alt v-if="item.hys" />
                <img src="./img/形状(3).png" width="20" height="20" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病(3).png" width="20" height="20" alt v-if="item.xljbs" />
                <img src="./img/基础疾病(3).png" width="20" height="20" alt v-if="item.jcjbs" />
              </p>
              <p class="renyuanImg" v-if="item.color=='BLUE'">
                <img src="./img/儿童(4).png" width="20" height="20" alt v-if="item.ets" />
                <img src="./img/老人(4).png" width="20" height="20" alt v-if="item.lrs" />
                <img src="./img/孕妇(4).png" width="20" height="20" alt v-if="item.hys" />
                <img src="./img/形状(4).png" width="20" height="20" alt v-if="item.sdzzs" />
                <img src="./img/心理疾病(4).png" width="20" height="20" alt v-if="item.xljbs" />
                <img src="./img/基础疾病(4).png" width="20" height="20" alt v-if="item.jcjbs" />
              </p>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
  <!-- </screen-adapter> -->
</template>

<script>
import { getAllInfo, getHotel } from "@/views/yq-hotel/api/roomKanban.js";
import "@/assets/icon/font/iconfont.css";

export default {
  data () {
    return {
      TITLE_BG: require("@/assets/images/Roomtitle.png"),
      roomState: "",
      activeClass: "statiBoxShow",
      //当前选中项
      activeName: "",
      floor: {
        roomTotal: 0,
        roomWork: 0,
        roomIsocial: 0,
        roomEnter: 0,
        roomResidue: 0,
        roomFocus: 0,
        roomDiagnosis: 0,
        roomDisinfect: 0,
      },
      // 酒店信息
      hotelInformation: {},
      // 酒店列表
      hotelList: [],
      hotelName: "",
      //根据所选层数来暂存房间列表
      theLayerData: [],
      houseId: "",
    };
  },
  mounted () {
    this.getHotelList();
  },
  computed: {
    sumList () {
      return [
        {
          name: "房间总数",
          bgc: "linear-gradient(270deg, #dceeff 0%, #bee0ff 100%)",
          color: "#66B6FF",
          img: "./img/组 3.png",
          num: "2",
          result: this.floor.roomTotal,
        },
        {
          name: "工作人员",
          bgc: "linear-gradient(270deg, #dceeff 0%, #bee0ff 100%)",
          img: `./img/组 4.png`,
          color: "#66B6FF",
          num: "2",
          result: this.floor.roomWork,
        },
        {
          name: "隔离人员",
          bgc: "linear-gradient(270deg, #dceeff 0%, #bee0ff 100%)",
          img: `./img/组 31.png`,
          color: "#66B6FF",
          num: "2",
          result: this.floor.roomIsocial,
        },
        {
          name: "入住房间",
          bgc: "linear-gradient(270deg, #E9FFF6 0%, #CCEADF 100%)",
          img: `./img/组 27.png`,
          color: "#5FC3BD",
          num: "2",
          result: this.floor.roomEnter,
        },
        {
          name: "空房间",
          bgc: "linear-gradient(270deg, #E7FFFE 0%, #D2F0EF 100%)",
          img: `./img/组 28.png`,
          color: "#5FC3BD",
          num: "2",
          result: this.floor.roomResidue,
        },
        {
          name: "重点关爱",
          bgc: "linear-gradient(270deg, #FFF2E8 0%, #FFE9D8 100%)",
          img: `./img/组 29.png`,
          color: "#FFA059",
          num: "2",
          result: this.floor.roomFocus,
        },

        {
          name: "重点关注",
          bgc: "linear-gradient(270deg, #FFF3F1 0%, #FFD8D1 100%)",
          img: `./img/组 32.png`,
          color: "#FF8B7C",
          num: "2",
          result: this.floor.roomDiagnosis,
        },
      ];
    },
  },
  methods: {
    statisticsShow () {
      this.activeClass =
        this.activeClass == "statiBoxHideen"
          ? "statiBoxShow"
          : "statiBoxHideen";
    },
    //获取酒店列表
    async getHotelList () {
      let rps = await getHotel();
      this.hotelName = this.$route.query.hotelName;
      this.hotelList = rps.data.data;
      this.getAllInfo();
    },
    //获取当前酒店信息
    async getAllInfo () {
      let rps = await getAllInfo({
        hotelId: this.$route.query.hotelId,
        roomState: this.roomState,
      });
      this.hotelInformation = rps.data.data;
      this.theLayerData = rps.data.data.floorStaticalList;
      this.theLayerData.forEach(e => Object.keys(this.floor).map(v => this.floor[v] += e[v]));
    },
    //过滤出当前选中酒店信息
    hotelChange () {
      this.hotelInformation = {};
      Object.keys(this.floor).map((e) => (this.floor[e] = 0));
      this.getAllInfo();
    },
    //获取该楼层房间列表
    getARoomList (item) {
      Object.keys(this.floor).map((e) => (this.floor[e] = 0));
      this.theLayerData = item.name ? this.hotelInformation.floorStaticalList.filter(e => e.name == item.name) : this.hotelInformation.floorStaticalList;
      if (item.name) {
        this.floor = { ...this.floor, ...this.hotelInformation.floorStaticalList.filter((e) => e.name == item.name)[0], };
      } else {
        this.theLayerData.forEach(e => Object.keys(this.floor).map(v => this.floor[v] += e[v]));
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box-item {
  display: flex;
  align-items: center;
  & > div {
    display: flex;
    flex-direction: column;
  }
}
.floor_con {
  margin-bottom: 40px;
  font-family: SourceHanSansCN-Bold;
}
// #title {
//   // padding: 20px;
//   height: 85px;
//   line-height: 95px;
//   background: linear-gradient(90deg, #4d9cfd 0%, #7662d5 100%);
//   background-image: url("./img/编组-22.png");
//   background-repeat: no-repeat;
//   font-size: 24px;
//   font-family: SourceHanSansCN-Bold, SourceHanSansCN;
//   font-weight: bold;
//   color: #ffffff;
// }
.smallTitle {
  height: 56px;
  line-height: 56px;
  padding: 0 15px 0 15px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgb(240, 242, 245), rgb(241, 240, 252));
  h3 {
    font-size: 20px;
    font-family: SourceHanSansCN-Bold, SourceHanSansCN;
    font-weight: bold;
    color: #4e9dfd;
    img {
      margin-right: 10px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #4e9dfd;
    }
  }
}
.el-tag {
  margin-left: 10px;
}
.fr {
  float: right;
}
.hotelName {
  display: inline-block;
  font-size: 24px;
  font-family: SourceHanSansCN-Bold;
  // width: 300px;
}
.tier {
  border: 1px solid #dcdfe6;
  height: 36px;
  line-height: 30px;
  text-align: center;
  width: 100%;
  border-radius: 2px;
}
.tier:active {
  background: #f0f0f0;
}
.pitchOn {
  background-color: #2a68c9;
  color: white;
}
.roomBox {
  border: 2px solid #dcdfe6;
  position: relative;
  border-radius: 10px;
  padding: 10px;
  height: 100px;
  width: 100%;
  cursor: pointer;
  .iconfont {
    font-size: 26px;
  }
  .icon-yaoxiang-copy {
    font-size: 20px;
    padding: 0 3px;
  }
  .icon-yishengmenzhen-copy {
    padding-right: 1px;
  }
  > img {
    position: absolute;
    top: 1px;
    right: 1px;
  }
  .renyuanImg {
    img {
      margin-left: 5px;
    }
  }
}

.roomBox:hover {
  -ms-transform: scale(1.1, 1.1); /* IE 9 */
  -webkit-transform: scale(1.1, 1.1); /* Safari */
  transform: scale(1.1, 1.1); /* 标准语法 */
}
.roomBox span {
  font-family: DIN Alternate;
}
.main {
  padding: 20px;
  height: 730px;
  position: relative;
  overflow-y: auto;
}
.wrapper {
  padding: 20px;
  /* 转化元素类型 */
  display: grid;
  /* 设置网格的间隙 */
  grid-gap: 10px;
  /* 设置每列的尺寸 */
  grid-template-columns: repeat(10, 1fr);
  .ren {
    display: inline-block;
    height: 18px;
    line-height: 18px;
    opacity: 0.64;
    border-radius: 2px;
    margin-left: 10px;
    padding: 0 5px;
  }
}
.el-icon-user-solid {
  color: #409eff;
}
.prompt {
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  img {
    margin-right: 5px;
    margin-left: 20px;
  }
  .iconfont {
    margin-left: 20px;
  }
}
.font-14 {
  font-size: 14px;
}

.weight {
  font-weight: 900;
  padding: 0 3px 0 3px;
}

.floorTab {
  width: 100%;
  /deep/.el-tabs__item {
    font-size: 18px;
    // font-weight: 600;
    font-family: SourceHanSansCN-Normal;
  }
  /deep/.el-tabs__nav-next {
    background-color: #e8e8e8;
  }
  /deep/.el-tabs__nav-prev {
    background-color: #e8e8e8;
  }
}
.statisticalBox {
  padding: 12px;
  position: relative;
}
.fl {
  float: left;
  p {
    font-family: Source Han Sans CN;
  }
}
/deep/.el-collapse-item__arrow {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  background-color: rgb(102, 182, 255);
  color: #ffffff;
  margin: 0px 90% 0 auto;
  transition: transform 0.3s;
  font-weight: 300;
}
/deep/.el-collapse-item__header {
  padding-left: 10px;
  background: rgba(102, 182, 255, 0.1);
  border-radius: 10px;
  height: 56px;
  line-height: 56px;
  font-size: 16px;
}
.statiBoxShow {
  display: block;
}
.statiBoxHideen {
  display: none;
}
.ORANGE {
  background: rgba(255, 160, 89, 0.1);
  color: #ffa059;
  border: 1px solid #ffa059;
  opacity: 1;
  border-radius: 4px;
  .ren {
    color: white;
    background: #ffa059;
  }
}
.PURPLE {
  background: rgba(221, 131, 224, 0.1);
  color: #dd83e0;
  border: 1px solid #dd83e0;
  opacity: 1;
  border-radius: 4px;
  .ren {
    color: white;
    background: #dd83e0;
  }
}
.RED {
  background: rgba(255, 139, 124, 0.1);
  border: 1px solid #ff8b7c;
  opacity: 1;
  color: #ff8b7c;
  border-radius: 4px;
  .ren {
    color: white;
    background: #ff8b7c;
  }
}
.GREEN {
  background: rgba(124, 148, 244, 0.1);
  border: 1px solid #7c94f4;
  opacity: 1;
  color: #7c94f4;
  border-radius: 4px;
  .ren {
    color: white;
    background: #7c94f4;
  }
}
.BLUE {
  background: rgba(97, 195, 157, 0.1);
  border: 1px solid #61c39d;
  opacity: 1;
  color: #61c39d;
  border-radius: 6px;
  .ren {
    color: white;
    background: #61c39d;
  }
}
.WHITE {
  background: white;
  border: 1px solid gray;
  border-radius: 6px;
  .ren {
    background: gray;
  }
}
.bg_title {
  height: 83px;
}
.back_img {
  width: 15px;
  height: 28px;
}
.content_title {
  position: absolute;
  top: 30px;
  left: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  .title_name {
    color: #fff;
    font-size: 25px;
    margin-left: 20px;
    font-weight: bold;
  }
}
</style>
